import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Sidebar } from 'react-vant'
import { ProductCard } from 'react-vant'
interface Datachildren {
  title: string
  word: string
  id: number
  img: string
  price: number
}
interface DataList {
  title: string
  id: string
  children: Datachildren[]
}
const List: React.FC = () => {
  const [datalist, setDatalist] = useState<DataList[]>([])
  const navigate = useNavigate()
  useEffect(() => {
    axios.get('/api/data').then((res) => {
      const resp = res.data.data
      setDatalist(resp)
    })
  }, [])
  return (
    <div>
      <Sidebar
        onChange={(item) => {
          navigate(item)
        }}
        sideStyle={{ position: 'fixed', top: '0', left: '0', zIndex: '1' }}
      >
        {datalist.map((item, i) => {
          return (
            <Sidebar.Item
              contentStyle={{
                backgroundColor: '#fff',
                padding: '18px 10px',
                width: '20vw',
                height: '100vh',
              }}
              title={item.title}
              key={i}
            >
              {item.children.map((v) => {
                return (
                  <ProductCard
                    price={v.price}
                    desc={v.word}
                    title={v.title}
                    thumb={v.img}
                    key={v.id}
                    style={{ padding: '0 0 0 30vw' }}
                    onClick={() => navigate(`/detail/${v.id}`, { state: v })}
                  />
                )
              })}
            </Sidebar.Item>
          )
        })}
      </Sidebar>
    </div>
  )
}
export default List
